<template>
  <div>
    <div class="analysisGeneration-title">
      <span></span>
      <label>分组名称配置</label>
      <div class="s"></div>
      <template>
        <div class="n" @click="addButClick">
          <i class="el-icon-edit"></i>
          添加分组
        </div>
      </template>
    </div>
    <div class="analysisGeneration-design-api-content">
      <el-table ref="table" :data="propsData.tableProp.groupNameProp.arrayData" border style="width: 100%"
                :header-cell-style="{background:'#f5f7fa',color:'#081333',fontWeight: 'normal'}"  :key="randomNumber" :default-sort="{prop: 'sort', order: 'ascending'}">
        <el-table-column label="序号" type="index" width="50" align="center" fixed="left"/>
        <el-table-column label="分组名称" min-width="150" :show-overflow-tooltip="true" align="center" prop="label"/>
        <el-table-column label="排序" width="80" :show-overflow-tooltip="true" align="center" sortable prop="sort" :sort-method="(a,b)=>{return a.sort - b.sort}">
          <template slot-scope="scope">
            <el-input v-model="scope.row.sort" placeholder="排序"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="190" align="center">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-view el-icon--left" @click="editClick(scope.row,scope.$index)">编辑</el-button>
            <el-button type="danger" icon="el-icon-delete el-icon--left" @click="delClick(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--操作按钮配置 dialog-->
    <el-dialog
        :append-to-body="true"
        :show-close="true"
        :title="dialogData.title"
        :visible.sync="dialogData.isDialog"
        custom-class="toConfigure-field-dialog"
        @close="dialogDataClose"
        width="500px"
    >
      <el-form :model="dialogData.formData" ref="but-form" class="analysisGeneration-form-dialog">
        <el-form-item label="分组名称" prop="label" class="s" :rules="[{ required: true, message: '请输入分组名称', trigger: 'blur' }]">
          <el-input v-model="dialogData.formData.label" placeholder="请输入分组名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="sort" class="s" :rules="[]">
          <el-input v-model="dialogData.formData.sort" placeholder="请输入排序" clearable></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogDataClose">取 消</el-button>
        <el-button type="primary" @click="dialogDataSub">确 定</el-button>
      </div>

    </el-dialog>


  </div>
</template>

<script>
export default {
  components: {},
  props: ['propsData'],
  data() {
    return {
      randomNumber: 1,//随机数
      //新增操作按钮dialog
      dialogData: {
        title: '新增分组名称',
        isDialog: false,
        formData: {
          id: '',
          label: '',//分组名称
          sort: '10',//排序 从小到大
        },
      },
    };
  },
  mounted() {
  },
  methods: {
    //添加分组
    addButClick() {
      this.dialogData.title = '新增分组';
      this.dialogData.isDialog = true;
    },
    //编辑
    editClick(row) {
      this.dialogData.title = '编辑分组名称';
      let jsonData = JSON.parse(JSON.stringify(row))
      this.dialogData.formData = jsonData;
      for (let i = 0; i < this.propsData.tableProp.groupNameProp.arrayData.length; i++) {
        if(this.propsData.tableProp.groupNameProp.arrayData[i].label == row.label){
          this.dialogData.formData.id = i;
        }
      }
      this.dialogData.isDialog = true;
    },
    //删除
    delClick(row) {
      for (let i = 0; i < this.propsData.tableProp.groupNameProp.arrayData.length; i++) {
        if (this.propsData.tableProp.groupNameProp.arrayData[i] == row) {
          this.propsData.tableProp.groupNameProp.arrayData.splice(i, 1);
          return false
        }
      }
    },
    //确定
    dialogDataSub() {
      this.$refs['but-form'].validate((valid) => {
        if (valid) {
          if (this.dialogData.formData.id !== '') {
            //改
            let butArray = JSON.parse(JSON.stringify(this.propsData.tableProp.groupNameProp.arrayData));
            butArray.splice(this.dialogData.formData.id, 1); //先删了
            let num = 0;
            for (let i = 0; i < butArray.length; i++) {
              if (butArray[i].label == this.dialogData.formData.label) {
                num = num + 1
              }
            }
            if (num > 0) {
              this.$message.error('改-分组名重复');
              return false
            } else {
              this.propsData.tableProp.groupNameProp.arrayData[this.dialogData.formData.id] = this.dialogData.formData;
              this.randomNumber = this.Utils.createRandomKey();
            }
          } else {
            //增
            for (let i = 0; i < this.propsData.tableProp.groupNameProp.arrayData.length; i++) {
              if (this.propsData.tableProp.groupNameProp.arrayData[i].label == this.dialogData.formData.label) {
                this.$message.error(`增-分组名重复`);
                return false
              }
            }
            this.dialogData.formData.id=new Date().getTime();
            this.propsData.tableProp.groupNameProp.arrayData.push(this.dialogData.formData);
          }

          this.dialogDataClose();
        }
      })
    },
    //取消
    dialogDataClose() {
      this.dialogData = this.$options.data().dialogData;
    },
  },
};
</script>

<style lang="scss" scoped></style>
